<template>
    <div class="type-container">
        <el-row class="btnRow" :gutter="20">
            <el-col :span="4" :offset="0">
                <el-button size="mini" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
            </el-col>
        </el-row>

        <el-table :tree-props="{children: 'children'}" row-key="typeId" :data="tableData" fit style="width: 100%">
            <el-table-column prop="typeId" label="分类id" min-width="150" align="center"></el-table-column>
            <el-table-column prop="typeName" label="分类名称" min-width="150" align="center"></el-table-column>
            <el-table-column prop="typeDescription" label="分类描述" min-width="150" align="center"></el-table-column>
            <el-table-column prop="typeOrder" label="分类排序" min-width="150" align="center"></el-table-column>
            <el-table-column label="分类创建时间" min-width="150" align="center">
                <template slot-scope="scope">{{getDate(scope.row.typeTime)}}</template>
            </el-table-column>
            <el-table-column label="操作" min-width="150" align="center">
                <template slot-scope="scope">
                    <el-button v-show="scope.row.typeId.indexOf('a') != -1" type="text" @click="add(scope.row)" size="small">新增</el-button>
                    <el-button type="text" @click="edit(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="del(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增分类" :before-close="beforeClose1" :visible.sync="addDialogVisible">
            <el-form ref="addForm" :rules="rules" :model="addForm">
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="radio" label="分类级别">
                            <el-radio v-model="addForm.radio" @change="changeOption" label="1">一级分类</el-radio>
                            <el-radio v-model="addForm.radio" @change="changeOption" label="2">二级分类</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="preType" label="上级分类">
                            <el-cascader v-model="addForm.preType" style="width:70%" :show-all-levels="false" clearable :props="{label:'typeName',value:'typeId',children:'children'}" :options="addoptions" placeholder="请选择分类级别"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="name" label="分类名称">
                            <el-input v-model="addForm.name" placeholder="请输入分类名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="分类排序">
                            <el-input-number style="width:70%" v-model="addForm.order" controls-position="right" :min="0" placeholder="数字越小分类越靠前"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="分类描述">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addForm.desc"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改分类" :before-close="beforeClose2" :visible.sync="modDialogVisible">
            <el-form ref="modForm" :rules="rules" :model="modForm">
                <!-- <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="radio" label="分类级别">
                            <el-radio v-model="modForm.radio" @change="changeOption" label="1">一级分类</el-radio>
                            <el-radio v-model="modForm.radio" @change="changeOption" label="2">二级分类</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="preType" label="上级分类">
                            <el-cascader v-model="modForm.preType" style="width:70%" :show-all-levels="false" clearable :props="{label:'typeName',value:'typeId',children:'children'}" :options="modoptions" placeholder="请选择分类级别"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="name" label="分类名称">
                            <el-input v-model="modForm.name" placeholder="请输入分类名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="分类排序">
                            <el-input-number style="width:70%" v-model="modForm.order" controls-position="right" :min="0" placeholder="数字越小分类越靠前"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24" :offset="0">
                        <el-form-item label="分类描述">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="modForm.desc"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from "moment";
import {
    addAtype,
    getAtype,
    addBtype,
    getAllType,
    delAtype,
    delBtype,
    modAtype,
} from "@/api/type";
export default {
    data() {
        var vRadio = (rule, value, callback) => {
            if (!value || "" == value) {
                callback(new Error("等级不能为空"));
            } else {
                callback();
            }
        };
        var vName = (rule, value, callback) => {
            if (!value || "" == value) {
                callback(new Error("分类名称不能为空"));
            } else {
                callback();
            }
        };
        var vType = (rule, value, callback) => {
            if (!value || "" == value || value.length <= 0) {
                callback(new Error("上级分类不能为空"));
            } else {
                callback();
            }
        };
        return {
            tableData: [],
            addForm: {
                preType: [],
                level: "",
                name: "",
                order: 0,
                desc: "",
                radio: "1",
            },
            modForm: {
                preType: [],
                level: "",
                name: "",
                order: "",
                desc: "",
                radio: "1",
            },
            addDialogVisible: false,
            modDialogVisible: false,
            rules: {
                radio: [{ validator: vRadio, trigger: "blur" }],
                name: [{ validator: vName, trigger: "blur" }],
                preType: [{ validator: vType, trigger: "blur" }],
            },
            addoptions: [],
            modoptions: [],
            aOptions: [
                {
                    typeId: "0",
                    typeName: "主类目",
                },
            ],
            bOptions: [
                {
                    typeId: "0",
                    typeName: "主类目",
                },
            ],
            aid: "",
            typeId: "",
        };
    },
    mounted() {
        this.updateOptions();
        // 获取数据
        this.updateTable();
    },
    methods: {
        getDate(str) {
            return moment(str).format("YYYY-MM-DD HH:mm:SS");
        },
        beforeClose1() {
            this.$refs.addForm.resetFields();
            this.addDialogVisible = false;
        },
        beforeClose2() {
            this.$refs.modForm.resetFields();
            this.modDialogVisible = false;
        },
        // 分类选择变化处理
        add(row) {
            if (row.typeName) {
                // 内部点进来的
                this.addForm.radio = "2";
                this.addoptions = this.bOptions;
                this.addForm.preType = [];
                this.addForm.preType.push("0");
                this.addForm.preType.push(row.typeId);
            } else {
                // 外部点击来的 默认上级为主类目
                this.addForm.radio = "1";
                this.addoptions = this.aOptions;
                this.addForm.preType = [];
                this.addForm.preType.push("0");
            }
            this.addDialogVisible = true;
        },
        edit(row) {
            let level = row.typeId.indexOf("a") == -1 ? 2 : 1;
            if (level == 1) {
                this.modForm.radio = "1";
                this.modoptions = this.aOptions;
                this.modForm.preType = [];
                this.modForm.preType.push("0");
                this.typeId = row.typeId;
                this.modForm.name = row.typeName;
                this.modForm.order = row.typeOrder;
            } else {
                this.modForm.radio = "2";
                this.modoptions = this.bOptions;
                this.modForm.preType = [];
                this.modForm.preType.push("0");
                this.modForm.preType.push(row.aid);
                this.aid = row.aid;
                this.typeId = row.typeId;
                this.modForm.name = row.typeName;
                this.modForm.order = row.typeOrder;
            }
            this.modDialogVisible = true;
        },
        del(row) {
            let level = row.typeId.indexOf("a") == -1 ? 2 : 1;
            this.$confirm(`确定删除分类 '${row.typeName}' 吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    if (level == 1) {
                        delAtype({ id: row.typeId }).then((e) => {
                            if (e.data.code == "0") {
                                this.$message.success(e.data.message);
                                this.updateTable();
                            } else {
                                this.message.error(e.data.message);
                            }
                        });
                    } else {
                        delBtype({ id: row.typeId }).then((e) => {
                            if (e.data.code == "0") {
                                this.$message.success(e.data.message);
                                this.updateTable();
                            } else {
                                this.message.error(e.data.message);
                            }
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "success",
                        message: "已取消",
                    });
                });
        },
        updateTable() {
            getAllType().then((e) => {
                if (e.data.code == "0") {
                    this.tableData = e.data.data;
                } else {
                    this.$message.error(e.data.message);
                }
            });
        },
        // 更新分类菜单
        updateOptions() {
            getAtype().then((e) => {
                if (e.data.code == "0") {
                    let options = [
                        {
                            typeId: "0",
                            typeName: "主类目",
                            children: e.data.data,
                        },
                    ];
                    this.bOptions = options;
                } else {
                    this.$message.error(e.data.message);
                }
            });
        },
        submit() {
            if (this.addDialogVisible) {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        // 提交
                        if (this.addForm.radio == 1) {
                            let ndata = {
                                typeName: this.addForm.name,
                                typeDescription: this.addForm.desc,
                                typeOrder: this.addForm.order,
                            };
                            addAtype(ndata).then((e) => {
                                if (e.data.code == "0") {
                                    this.$message.success(e.data.message);
                                    // 更新table
                                    this.updateTable();
                                    this.updateOptions();
                                } else {
                                    this.$message.error(e.data.message);
                                }
                            });
                        } else {
                            let ndata = {
                                typeId: this.addForm.preType[1],
                                typeName: this.addForm.name,
                                typeDescription: this.addForm.desc,
                                typeOrder: this.addForm.order,
                            };
                            console.log(ndata);
                            addBtype(ndata).then((e) => {
                                if (e.data.code == "0") {
                                    this.$message.success(e.data.message);
                                    // 更新table
                                    this.updateTable();
                                    this.updateOptions();
                                } else {
                                    this.$message.error(e.data.message);
                                }
                            });
                        }
                        this.addDialogVisible = false;
                    } else {
                        return false;
                    }
                });
            } else {
                this.$refs.modForm.validate((valid) => {
                    if (valid) {
                        if (this.modForm.radio == 1) {
                            let ndata = {
                                aid: this.aid,
                                typeId: this.typeId,
                                typeName: this.modForm.name,
                                typeDescription: this.modForm.desc,
                                typeOrder: this.modForm.order,
                            };
                            modAtype(ndata).then((e) => {
                                if (e.data.code == "0") {
                                    this.$message.success(e.data.message);
                                    // 更新table
                                    this.updateOptions();
                                    this.updateTable();
                                } else {
                                    this.$message.error(e.data.message);
                                }
                            });
                        } else {
                            let ndata = {
                                typeId: this.addForm.preType[1],
                                typeName: this.addForm.name,
                                typeDescription: this.addForm.desc,
                                typeOrder: this.addForm.order,
                            };
                            console.log(ndata);
                            addBtype(ndata).then((e) => {
                                if (e.data.code == "0") {
                                    this.$message.success(e.data.message);
                                    // 更新table
                                    this.updateTable();
                                } else {
                                    this.$message.error(e.data.message);
                                }
                            });
                        }
                        this.modDialogVisible = false;
                    } else {
                        return false;
                    }
                });
            }
        },
        changeOption(val) {
            if (val == 1) {
                // 一级分类
                this.addForm.preType = ["0"];
                this.addoptions = this.aOptions;

                this.modForm.preType = ["0"];
                this.modoptions = this.aOptions;
            } else {
                // 二级分类
                this.addForm.preType = [];
                this.addoptions = this.bOptions;

                this.modForm.preType = [];
                this.modoptions = this.bOptions;
            }
        },
    },
};
</script>

<style scoped>
.type-container {
    padding: 20px;
}
.btnRow {
    margin-bottom: 20px;
}
.el-input {
    width: 70%;
}
</style>